<!doctype html>
<html lang="en" data-manifest="" data-framework="typescript">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <style>
        @import "/blb/semantic.css";

        #logs {
            position: absolute;
            left: 0;
            top: 2rem;
            width: 100%;
            height: 10rem;
            border: 0;
            font-size: 0.6rem;
        }

        #logs img {
            max-width:18rem;
        }

        #iframe {
            position: absolute;
            left: 0;
            top: 12.5rem;
            width: 100%;
            height: calc(100% - 12.5rem);
            border: 0;
        }
    </style>
    <script>
        var projects = [
        {
          "text": {
            "main.blocks": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n  <block type=\"pxt-on-start\" id=\",{,HjW]u:lVGcDRS_Cu|\" x=\"-247\" y=\"113\"></block>\n</xml>",
            "main.ts": "\n",
            "README.md": " ",
            "pxt.json": "{\n    \"name\": \"Untitled\",\n    \"dependencies\": {\n        \"core\": \"*\"\n    },\n    \"description\": \"\",\n    \"files\": [\n        \"main.blocks\",\n        \"main.ts\",\n        \"README.md\"\n    ]\n}"
          }
        }];
        var filters = {
            "namespaces": {
                "events": 0,
                "math": 2
            },
            "blocks": {
                "dash_move_forward": 0,
                "dash_turn": 2
            },
            "fns": {
                "move": 0,
                "turn": 2
            }
        }
        var lastSaved;
        var filter = false;

        function toggleFilters() {
            filter = !filter;
            var logs = document.getElementById("logs");
            logs.innerText += "filter: " + filter + "\n";
        }

        var pendingMsgs = {};
        function sendMessage(action) {
            console.log('send ' + action)
            var logs = document.getElementById("logs");
            logs.innerText += "> " + action + "\n";
            var editor = document.getElementById("iframe").contentWindow;
            var msg = {
                type: "pxteditor",
                id: Math.random().toString(),
                action: action
            };
            if(action == 'importproject') {
                var prj = JSON.parse(JSON.stringify(projects[0]));
                msg.project = prj;
                msg.filters = filter ? JSON.parse(JSON.stringify(filters)) : {};
                msg.response = true;
            } else if (action == 'renderblocks') {
                msg.response = true;
                msg.ts = 'while(true){ }'
            } else if (action == 'toggletrace') {
                msg.intervalSpeed = 1000;
            }
            else if (action == 'settracestate') {
                msg.enabled = true;
            }
            if (msg.response)
                pendingMsgs[msg.id] = msg;
            editor.postMessage(msg, "*")
        }

        function receiveMessage(ev) {
            var editor = document.getElementById("iframe").contentWindow;
            var msg = ev.data;
            console.log('received...')
            console.log(msg)
            var logs = document.getElementById("logs");
            if (msg.action === "simevent") {
                logs.innerText += "< " + msg.type + " " + msg.action + " (" + msg.subtype + ")\n";
            }
            else {
                logs.innerText += "< " + msg.type +(msg.action ? " " + msg.action : "" ) + "\n";
            }
            if(msg.resp)
                console.log(JSON.stringify(msg.resp, null, 2))

            if (msg.type == "pxthost") {
                if (msg.action == "workspacesync") {
                    // no project
                    msg.projects = projects;
                    if (filter) msg.editor = {
                        "filters": JSON.parse(JSON.stringify(filters)),
                        "searchBar": false
                    }
                    editor.postMessage(msg, "*")
                    return;
                } else if (msg.action == "workspacesave") {
                    console.log(JSON.stringify(msg.project, null, 2))
                    lastSaved = msg.project;
                }
            }
            if (msg.type == "pxteditor") {
                var req = pendingMsgs[msg.id];
                if (req.action == "renderblocks") {
                    var img = document.createElement("img");
                    img.src = msg.resp;
                    logs.appendChild(img)
                }
            }
            delete pendingMsgs[msg.id];
        }

        window.addEventListener("message", receiveMessage, false);

        function importHexFile() {
            var f = document.getElementById("hexfile").files[0];
            var reader = new FileReader();
            reader.onload = (ev) => {
                var editor = document.getElementById("iframe").contentWindow;
                var s = reader.result;
                editor.postMessage({
                    type: "importfile",
                    filename: f.name,
                    parts: [s]
                }, "*")
            }
            reader.readAsText(f);
        }
    </script>
</head>
<body>
    <div id="buttons" class="ui buttons">
        <button class="ui button" onclick="sendMessage('switchblocks')">switch to blocks</button>
        <button class="ui button" onclick="sendMessage('switchjavascript')">switch to javascript</button>
        <button class="ui button" onclick="sendMessage('startsimulator')">start sim</button>
        <button class="ui button" onclick="sendMessage('restartsimulator')">reset sim</button>
        <button class="ui button" onclick="sendMessage('stopsimulator')">stop sim</button>
        <button class="ui button" onclick="sendMessage('newproject')">newproject</button>
        <button class="ui button" onclick="sendMessage('importproject')">importproject</button>
        <button class="ui button" onclick="toggleFilters()">filter</button>
        <button class="ui button" onclick="sendMessage('toggletrace')">toggle trace</button>
        <button class="ui button" onclick="sendMessage('settracestate')">trace on</button>
        <button class="ui button" onclick="sendMessage('undo')">undo</button>
        <button class="ui button" onclick="sendMessage('redo')">redo</button>
        <button class="ui button" onclick="sendMessage('renderblocks')">renderblocks</button>
        <button class="ui button" onclick="sendMessage('closeflyout')">close flyout</button>
        <br/>
        <input id="hexfile" class="ui input" type="file" />
        <button class="ui button" onclick="importHexFile()">import hex</button>
    </div>
    <pre id="logs" class="ui"></pre>
    <iframe id="iframe" src="index.html?dbg=1&amp;controller=1"></iframe>
</body>

</html>
